<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		
	</style>
	<script src="../../../../dist/vue/dist/vue.min.js"></script>
	<body>
		<div id="dv" >
			选择性别：<br/><br/>
			 男：<input type="radio" id="man" value="男" v-model="picksex" />&nbsp&nbsp
			 女：<input type="radio" id="women" value="女" v-model="picksex" />
			 <br/><br/>
			 婚否：<br /><br />
			 已婚：     <input type="radio"    value="已婚"  v-model="pickmarry" /> &nbsp&nbsp
			 <nbsp></nbsp>
			 未婚：   <input type="radio"  value="未婚"  v-model="pickmarry" />
			 <br/>
			 <br/>
			 
			 基本资料：<br /><br />
			  性别：{{picksex}} <br />
			 婚否：{{pickmarry}}
		</div>
	</body>
	<script>
		new Vue({
			el:'#dv',
			data:{
				picksex:'',
				pickmarry:''
				
			}
		})
    

	</script>
	   <!--v-model可以对radio单选按钮进行双向绑定，具体用法是：
	     1、在data中设置一个空字符串的数据；
	     2、对一组需要进行单选的多个radio设置v-model，值是相同的data中的选项的key值，例如选择性别，就都设置相同的picksex；
	     3、在页面上使用{{}}模板来显示经过绑定的数据-->
	      
</html>
